<template>
  <view class="review">
    <view class="video-top"></view>
    <view class="video-bottom"></view>
    <cover-view class="overlay">
      <div class="headtab">
        <div style="height: 38px" class="flex justify-around align-center padding-lr-xl padding-tb-xs">
          <view
              @click="routerJump('/pages/review/review')"
              :to="{ path: '/pages/review/review' }"
          >
            <view class="text-white text-lg flex justify-center align-center">逛逛</view>
          </view>
          <view
              @click="routerJump('/pages/headline/headline')"
              :to="{ path: '/pages/headline/headline' }"
          >
            <view class="text-white text-lg flex justify-center align-center checked">头条</view>
          </view>
        </div>
      </div>
    </cover-view>
    <view class="uni-padding-wrap" v-if="videoList.length">
      <view class="page-section swiper">
        <view class="page-section-spacing">
          <swiper class="swiper" @change="changefun" @animationfinish="animationfinishfun" :current="current" :circular="false" :vertical="true">
            <block v-if="PayVideo">
              <swiper-item v-for="(item,index) in PayVideo" :key="index">
                <view class="swiper-item uni-bg-black">
                  <video
                      object-fit="cover"
                      :custom-cache="false"
                      :show-fullscreen-btn="false"
                      :show-center-play-btn="false"
                      enable-play-gesture
                      :initial-time="0"
                      class="video"
                      :controls="false"
                      :id="'id'+index"
                      :src="item.video"
                      autoplay
                      loop
                      :enable-progress-gesture="false"
                      v-if="index == current"
                  >
                  </video>
                </view>
              </swiper-item>
            </block>
          </swiper>
        </view>
      </view>
    </view>
    <cover-view class="bottom-box">
      <view class="f-r j-b" style="width: 100%;padding-right: 80rpx">
        <div class="left">
        </div>
        <div class="right">
          <div class="logo">
            <u-image width="50px" height="50px" style="border-radius: 50%;overflow:hidden;" src="/static/home/logo_white.png" mode="widthFix"></u-image>
          </div>
          <div class="op-icon">+</div>

          <div class="icon-list">
            <u-image @click="collect" width="32px" height="28px" class="icon" src="/static/home/collect.png"></u-image>
<!--            <u-image width="28px" height="28px" class="icon" src="/static/home/msg.png"></u-image>-->
<!--            <u-image width="28px" height="28px" class="icon" src="/static/home/share.png"></u-image>-->
          </div>
        </div>
      </view>
    </cover-view>
    <tabbar></tabbar>
  </view>
</template>

<script>
import API_Request from '@/api/api'
export default {
  data() {
    return {
      PayVideo: [],
      videoData: {},
      videoList: [],
      description: '',
      current: 0,
      index_: 0,
      videoContext: '',
      duration: '',//总视频时长
    }
  },
  computed: {
    product() {
      return this.PayVideo[this.current] || {}
    }
  },
  onShow() {
    API_Request.getHeadlineVideo().then(res => {
      console.log(res)
      this.videoList = res.data
      this.PayVideo = this.videoList //上下滑动总数据
      this.$nextTick(() => {
        let videoContext = uni.createVideoContext('id0')
        console.log('videoContext',videoContext.play)
        setTimeout(() => {
          videoContext.play() //开始播放当前视频
        })
      })
    })
  },
  methods: {
    routerJump(url) {
      uni.navigateTo({
        url
      })
    },
    toJump() {
      uni.navigateTo({
        url: '/' + this.product.url
      })
    },
    collect() {
      if (!this.$store.getters.userInfo.id) {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        })
        return
      }
      const item = this.videoList[this.current]
      API_Request.collect({
        type: 0,
        video_id: item.id,
        user_id: this.$store.getters.userInfo.id
      }).then(res => {
        if (res.data.code === 0) {
          uni.showToast({
            title: '收藏成功',
            icon: 'none'
          })
        } else {
          uni.showToast({
            title: res.data.msg,
            icon: 'none'
          })
        }
      })
    },
    // current改变时会触发change 事件
    changefun(e) {
      let current = e.detail.current
      uni.setNavigationBarTitle({
        title: this.PayVideo[current].name
      })
      if(this.PayVideo[current].desc) {
        this.description = this.PayVideo[current].desc
      }
      // this.duration = this.PayVideo[current].videoTime
      let videoContext = uni.createVideoContext('id' + this.current)
      videoContext.pause() //停止播放
    },
    // 动画结束时触发
    animationfinishfun(e) {
      let current = e.detail.current
      let videoContext = uni.createVideoContext('id' + this.current)
      videoContext.pause() //停止播放非当前视频
      videoContext = uni.createVideoContext('id' + current)
      console.log('videoContext',videoContext.play)
      videoContext.play() //开始播放当前视频
      this.current = current //保存当前下标 播放下一个视频时停止上一个视频 防止声音重复
    }
  },
  // 从前台进入后台
  onHide() {
    this.videoList = []
  },
  onUnload() {
    this.videoList = []
  }
}
</script>

<style scoped lang="scss">
.product-list {
  background-color: #fff;
  margin-right: 8px;
  padding: 18px;
  border-radius: 10px;
  overflow: hidden;
  .product-item {
    .product-body {
      display: flex;
      align-items: center;
      height: 100px;
      .product-desc {
        margin-left: 10px;
        flex-grow: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .product-name {
          font-size: 14px;
          line-height: 22px;
        }
      }
      .product-price {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;
        color: #fe6600;
      }
      .buy-button {
        color: #fff;
        background-image: linear-gradient(-90deg, #ff4950, #ff8123);
        padding:2px 8px;
        border-radius: 3px;
        text-align: center;
      }
    }
    .product-header {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      .product-name {
        padding-left: 4px;
        font-size: 18px;
        font-weight: 700;
      }
    }
  }
}
.bottom-box {
  position: absolute;
  z-index: 99;
  left: 0;
  bottom: 140rpx;
  width: 100%;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  .left {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 20px;
  }
  .right {
    width: 60px;
    flex-shrink: 0;
    height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    .op-icon {
      position: absolute;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: hidden;
      left: 50%;
      transform: translateX(-50%);
      top: 40px;
      background-color: red;
      color: #fff;
      font-size: 18px;
      line-height: 22px;
    }
    .logo {
      flex-shrink: 0;
      width: 60px;
      height: 60px;
      position: relative;
      background-color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      overflow: hidden;
    }
    .icon-list {
      margin-top: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      .icon {
        width: 28px;
        height: 28px;
        margin: 20px 0;
      }
    }
  }
}
.padding-tb-xs {
  padding-top: 5px;
  padding-bottom: 5px;
}
.padding-lr-xl {
  padding-left: 28px;
  padding-right: 28px;
}
.justify-center {
  justify-content: center;
}
.justify-around {
  justify-content: space-around;
}
.align-center {
  align-items: center;
}
page {
  height: 100%;
}
.text-white {
  color: #fff;
}
.text-lg {
  font-size: 18px;
}
.checked {
  font-weight: 800 !important;
  border-bottom: 2px solid #fff;
}
.review {
  height: 100%;
  position: relative;
  overflow: hidden;
  .video {
    height: 100%;
    background-color: #000;
  }
  .video-bottom {
    position: absolute;
    bottom: 100rpx;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, .4), transparent);
    width: 100%;
    height: 280px;
    z-index: 2;
  }
  .video-top {
    position: absolute;
    top: 0;
    background-image: linear-gradient(0deg, transparent, rgba(0, 0, 0, .4));
    width: 100%;
    height: 172px;
    z-index: 2;
  }
  .headtab {
    top: 30px;
    width: 229px;
    height: 29px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 990;
  }
}
.circle {
  background: rgba(34, 34, 34, 0.4);
  border-radius: 50%;
  z-index: 2;
  height: 70px;
  width: 70px;
  position: fixed;
  top: 0;
  bottom: 441rpx;
  left: 31rpx;

  margin: auto;

  .red {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 3;
    height: 35px;
    width: 35px;
  }
}

.swiper {
  height: 100vh;

  .swiper-item {
    height: 100vh;
    position: relative;
  }

  .uni-bg-black {
    background: black;
  }
}

.video {
  width: 100%;
  height: 100%;
  position: relative;
}

.left_box {
  position: fixed;
  bottom: 90rpx;
  left: 24rpx;
  .ke_context {
    overflow-y: scroll;
    max-height: 300rpx;
    white-space:pre-wrap;
    width: 700rpx;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    white-space:pre-wrap;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
  }

  .height {
    margin-bottom: 40rpx;
  }

  .ren {
    margin: 20rpx 0;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
  }

  .auto {
    display: flex;
    align-items: center;
    width: 310rpx;
    height: 60rpx;
    margin-top: 24rpx;
    opacity: 1;
    border-radius: 8rpx;
    padding-left: 10rpx;

    cover-view {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      line-height: 90px;
      text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
    }

    cover-image {
      margin-right: 10rpx;
      height: 28rpx;
      width: 26rpx;
    }
  }

  .ke {
    display: flex;
    align-items: center;
    width: 310rpx;
    height: 60rpx;
    background: rgba(0, 0, 0, 0.3);
    opacity: 1;
    border-radius: 8rpx;
    padding-left: 10rpx;

    cover-view {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      line-height: 90px;
      text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
    }

    cover-image {
      margin-right: 10rpx;
      height: 40rpx;
      width: 40rpx;
    }
  }
}

.H_T {
  z-index: 2;
  width: 100%;
  display: flex;
  box-sizing: border-box;
  position: absolute;
  padding: 0 30rpx;
  background: transparent;
  justify-content: space-between;

  .back {
    height: 48rpx;
    width: 48rpx;
  }

  .search {
    height: 48rpx;
    width: 48rpx;
  }
}

.right_box {
  width: 100rpx;
  position: absolute;
  z-index: 2;
  bottom: 60rpx;
  right: 12rpx;
  display: flex;
  flex-direction: column;

  .top1 {
    position: relative;
    height: 124rpx;

    .avatar_img {
      width: 98rpx;
      height: 98rpx;
      border-radius: 50%;
    }

    .add_img {
      position: absolute;
      z-index: 99;
      width: 48rpx;
      height: 48rpx;
      bottom: 10rpx;
      left: 0;
      right: 0;
      margin: 0 auto;
    }
  }

  .top2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 37rpx;

    .t_img {
      height: 72rpx;
      width: 72rpx;
      margin-bottom: 10rpx;
    }

    .font_t {
      font-size: 26rpx;
      font-family: SF Pro Text;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);

      text-shadow: 0px 1rpx 1rpx rgba(0, 0, 0, 0.4);
      text-align: center;
    }
  }

}
</style>
